<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="this.query">
				<el-form-item>
					<el-input v-model="query.keyword" placeholder="关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="serch">查询</el-button>
				</el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>

			</el-form>
		</el-col>

		<!--列表-->
		<template>
			<el-table :data="pageInfo.rows"
                highlight-current-row
                v-loading="loading"
                @selection-change="handleSelectionChange"
                style="width: 100%;">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
				<el-table-column prop="name" label="名称" width="120" sortable>
				</el-table-column>
				<el-table-column prop="tel" label="电话" width="120"  sortable>
				</el-table-column>
        <el-table-column prop="registerTime" label="注册时间" width="120"  sortable>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="120"  sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1" style="color: #8c939d">待审核</span>
            <span v-if="scope.row.state == 2" style="color: #1d8ce0">待激活</span>
            <span v-if="scope.row.state == 3" style="color: #11b95c;">激活成功</span>
            <span v-if="scope.row.state == 4" style="color: red">驳回</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" width="200"  sortable>
        </el-table-column>
        <el-table-column prop="logo" label="logo" width="120"  sortable>
          <template slot-scope="scope">
            <img :src="scope.row.logo" style="width:40px;height: 50px;"/>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
			</el-table>
		</template>
    <!--分页工具条-->

    <!--工具条-->
    <el-col :span="24" class="toolbar">
    <el-button type="danger" v-on:click="batchDelete">批量删除</el-button>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.query.currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="this.query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        style="float:right;"
        :total="this.pageInfo.total">
    </el-pagination>
    </el-col>
    <!-- 新增/修改弹框 -->
    <el-dialog title="新增/修改" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <el-form :model="saveForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="键" >
          <el-input v-model="saveForm.key" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="值" prop="sn">
          <el-input v-model="saveForm.value" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="介绍" prop="sn">
          <el-input v-model="saveForm.intro" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click.native="saveFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>
    
	</section>
</template>
<script>

	export default {
		data() {
			return {

				loading: false,
        pageInfo:{
				  total:0,
          rows:[]
        },
        query:{
				  currentPage:1,
          pageSize:10,
          keyword:''
        },
        selColu:[],
        // 修改和新增相关数据
        saveFormVisible:false, //新增/修改弹出框隐藏
        addFormRules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' } // trigger触发 blur 失焦
          ],
          sn: [
            { required: true, message: '请输入唯一标识', trigger: 'blur' } // trigger触发 blur 失焦
          ]

        },

        saveForm:{
				  id:null,
				  key:"",
          value:"",
          intro:""
        },
        addLoading : false,
			}

		},
		methods: {
		  // 点击编辑的方法
      handleEdit(index,row){
        /**
         * path 是用来标记 父部门们的
         */
        // 显示弹框
        this.saveFormVisible = true;
        let temp = Object.assign({}, row);
        this.saveForm = temp

      },
		  // 点击保存数据
      saveSubmit(){
        var saveForm = this.saveForm;
        var parent = saveForm.parent;
        this.$http.post("/shop",this.saveForm)
        .then(result=>{
          result = result.data
          if (result.success){
              // 关弹框
            this.saveFormVisible = false;
            // 回到第一页
            this.query.currentPage = 1
             //刷新页面
            this.getShops()
          }else{
            this.$message({message: '请联系管理员!',type: 'warning' });
          }
        }).catch(result=>{
          this.$message({message: '糟糕网络异常,请稍后再试!',type: 'warning' });
        })
      },

		  // 点击新增按钮
      handleAdd(){

        this.saveForm = {
          id:null,
          key:"",
          value:"",
          intro:""
        }
      
        this.saveFormVisible = true;
      },
		  // 批量删除 val所有被选中的行数据 但是都是 对象
      batchDelete(){
        var ids = this.selColu.map(x=>x.id);
        if (ids.length == 0 ){
          this.$message({message: '请选择要删除的部门',type: 'warning' });
          return ;
        }
        this.$confirm('此操作将永久删除改数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 点击 确认按钮会触发then()
          this.$http.patch("/shop", ids)
              .then(result => {
                result = result.data
                if (result.success) {
                  this.$message({message: '删除成功', type: 'success'});
                  // 将当前页 设置为 第一页
                  this.query.currentPage = 1
                  this.getShops();
                } else {
                  this.$message({message: '请联系管理员!', type: 'warning'});
                }
              }).catch(result => {
            this.$message({message: '糟糕网络异常,请稍后再试!', type: 'warning'});
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSelectionChange(val){
        this.selColu = val;
      },

      // 删除指定
      handleDel(index,row){
        var id = row.id;
        this.$confirm('此操作将永久删除改数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 点击 确认按钮会触发then()
          // 发送axios请求
          this.$http.delete("/shop/"+id)
              .then(result=>{
                result = result.data
                if (result.success){
                  this.$message({message: '删除成功',type: 'success' });
                  // 将当前页 设置为 第一页
                  this.query.currentPage = 1
                  this.getShops();
                }else {
                  this.$message({message: '请联系管理员!',type: 'warning' });
                }
              }).catch(result=>{
            this.$message({message: '糟糕网络异常,请稍后再试!',type: 'warning' });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      serch(){
        this.query.currentPage = 1;
        this.getShops();
      },
			//handleSizeChange更改每页条数的时候
      handleSizeChange(val){
       this.query.pageSize = val;
       this.query.currentPage = 1;
       // 调用查询
        this.getShops();
      },
      //handleCurrentChange 页码变化触发
      handleCurrentChange(val){
        this.query.currentPage = val;
        // 调用查询
        this.getShops();
      },

			//获取部门列表分页
			getShops: function () {
				// 发送后台的请求 axios 每一个axios都请求 http:/localhost:8080
        debugger;
        this.$http.put("/shop",this.query)
        .then(result=>{
          console.log(result);

          result = result.data

          if (result.success){
            console.log(result);
            this.pageInfo = result.objData

          }else{
            this.$message({message: '查询失败请联系管理员',type: 'warning' });
          }
        })
        .catch(result =>{
          this.$message({message: '糟糕网络异常,请稍后再试!',type: 'warning' });
        })
        // then

        // catch
			}
		},
		mounted() {
			this.getShops();
		}
	};

</script>

<style scoped>

</style>